<template lang="pug">
  Card(shadow style="height:332px").percent-card
    Row(slot="title")
      Col(span="8") 名称
      Col(span="16") 数量
    Row(v-for="(item,index) in value" :key="index")
      Col(span="8").col
        span.style-1.mr-15(:style="{background:color[index]}")
        span.style-2 {{item.name}}
      Col(span="16").col
        span.style-3 {{item.value}}
        Progress(:percent="parseFloat((item.value/count*100).toFixed(2))")
</template>

<script>

export default {
  name: 'Percent',
  props: {
    value: Array,
    color: Array
  },
  data () {
    return {
    }
  },
  computed: {
    count () {
      let mumbers = this.value.map((item) => {
        return item.value
      })
      let sum = 0

      mumbers.forEach((a) => {
        sum += a
      })
      return sum
    }
  },
  methods: {
  }
}
</script>

<style lang="less" scoped>
  .percent-card{
    .col{
      display: flex;
      align-items: center;
    }
    .ivu-row{
      padding: 15px 0;
      border-bottom: 1px solid #e4e4e4;
      &:last-child{
        border: none;
      }
    }
    .style-1{
      display: inline-block;
      width: 10px;
      height: 20px;
    }
    .style-3{
      min-width: 80px;
    }
  }

</style>
